<template>
  <!-- 整体容器 -->
  <div class="content-box">
    <!-- 容器上半部分 -->
    <div class="content-top">
      <!-- 地图部分 -->
      <div class="content-top-map">
        <!-- 地图标题 -->
        <div class="map-title">
          <span>浙江省火化人数统计</span>
        </div>
        <!-- 查询条件 -->
        <div class="searchBtn">
          <el-button round class="btnstyle" @click="timeclick('年')" style="background:#ff6c6c;">按&nbsp;&nbsp;&nbsp;年</el-button>
          <el-button round class="btnstyle" @click="timeclick('月')" style="background:#00ea90">按&nbsp;&nbsp;&nbsp;月</el-button>
          <el-button round class="btnstyle" @click="timeclick('日')" style="background:#faa232">按&nbsp;&nbsp;&nbsp;日</el-button>
          <el-date-picker v-model="values" style="width:8vw;margin-top:2vh" :type=timeType placeholder="选择日期" @change="timechange($event)"></el-date-picker>
        </div>
        <!-- 地图 -->
        <div class="map" @contextmenu="chartClick(zhejiang)" ref="map"/>
      </div>
      <!-- 上半部的饼状图 -->
      <div class="content-top-pie">
        <!-- 上面的饼状图 -->
        <div class="content-top-pie-pietop">
          <HollowPie :title="pietopTitle" :legenddata="Pielegenddata" :seriesData="PieSeriesData"></HollowPie>
        </div>
        <!-- 下面的饼状图 -->
        <div class="content-top-pie-piebottom">
          <SolidPie></SolidPie>
        </div>
        
      </div>
    </div>
    <!-- 容器下半部分 -->
    <div class="content-bottom">
        <!-- 底部左半部分 -->
        <div class="bottom-left">
          <category></category>
        </div>
        <!-- 底部右半部分 -->
        <div class="bottom-right">
          <HollowPie :title="piebottomTitle" :iconType="iconType" :legenddata="botlegenddata" :seriesData="botSeriesData"></HollowPie>
        </div>
        
    </div>
    

    
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.el-button + .el-button {
  margin-left: 0;
}
.btn {
  text-align: center;
}
.content-box{
  width: 100%;
  height: 87vh;
  min-height: 87vh;
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.content-top{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex: 5;
}
.content-top .content-top-map{
  position: relative;
  display: flex;
  flex: 5;
  margin-right: 20px;
  border-radius: 10px;
  background: url(../../../static/imgs/backgroundMap.png) no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover
}
.content-top .content-top-map .map-title{
  position: absolute;
  top: 2.5%;
  left: 25px;
  font-size: 24px;
  color: #ffffff
}
.content-top .content-top-map .searchBtn{
  position: absolute;
  top: 13%;
  left: 25px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}
.content-top .content-top-map .searchBtn .btnstyle{
  width: 8vw;
  color:#ffffff;
  flex: 1;
  margin-top: 2vh;
  font-size: 18px;
}
.content-top .content-top-map .map{
  width: 80%;
  margin-left: 20%;
}
.content-top-pie-pietop{
  flex: 2; 
  width: 100%;
  height: 100%;   
  margin-bottom: 10px;
  border-radius: 10px;
  background: url(../../../static/imgs/pie-1.png) no-repeat;
  background-size: cover;
  position: relative;
}
.content-top .content-top-pie{
  display: flex;
  flex: 3;
  flex-direction: column;
}
.content-bottom{
  width: 100%;
  display: flex;
  flex: 3;
  margin-top: 20px;
  border-radius: 10px;
  background: url(../../../static/imgs/backgroundBottom.png);
  width: 100%;
  height: 100%;
  background-size: cover
}
.content-bottom .bottom-left{
  flex: 3;
  width: 100%;
  height: 100%;
  position: relative;
}

.content-bottom .bottom-right{
  flex: 2;
  width: 100%;
  height: 100%;
  position: relative;
}
.content-top .content-top-pie .content-top-pie-piebottom{
  flex: 2;
  margin-top: 10px;
  border-radius: 10px;
  background: url(../../../static/imgs/pie-2.png) no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  position: relative;
}
</style>

 
<script>
import echarts from "echarts";
import axios from 'axios';
import HollowPie from "@/components/DataWatch/HollowPie";
import SolidPie from "@/components/DataWatch/SolidPie";
import category from "@/components/DataWatch/category";

// import '@/assets/map/zhejiang.js'
 
export default {
 
  data() {
    return {
      piebottomTitle: '火化人数统计详情',
      pietopTitle: '浙江省—死亡原因',
      iconType: 'circle',
      timeType: 'year',
      Pielegenddata: ['因病','意外','自杀','被害','其他','未填','未填1','未填2'],
      PieSeriesData: [
        {value:335, name:'因病'},
        {value:310, name:'意外'},
        {value:234, name:'自杀'},
        {value:135, name:'被害'},
        {value:1548, name:'其他'},
        {value:200, name:'未填'},
        {value:200, name:'未填1'},
        {value:200, name:'未填2'},
      ],
      botlegenddata: ["杭州市","宁波市","温州市","绍兴市","湖州市","嘉兴市","金华市","衢州市","台州市","丽水市","舟山市"],
      botSeriesData: [
        {name: '杭州市', value: 10,},
        {name: '湖州市', value: 20},
        {name: '嘉兴市', value: 30},
        {name: '宁波市', value: 40},
        {name: '绍兴市', value: 40},
        {name: '金华市', value: 40},
        {name: '舟山市', value: 40},
        {name: '台州市', value: 80},
        {name: '温州市', value: 90},
        {name: '丽水市', value: 100},
        {name: '衢州市', value: 110}
      ],
      myChart: null,
      zhejiang: {name: '浙江省'},
      values: '',
      provinceList: ["浙江省","杭州市","宁波市","温州市","绍兴市","湖州市","嘉兴市","金华市","衢州市","台州市","丽水市","舟山市"],
      cityProper: {
        '浙江省': 'static/map/zhejiang.json',
        '杭州市': 'static/map/hangzhou.json',
        '宁波市': 'static/map/ningbo.json',
        '温州市': 'static/map/wenzhou.json',
        '绍兴市': 'static/map/shaoxing.json',
        '湖州市': 'static/map/huzhou.json',
        '嘉兴市': 'static/map/jiaxing.json',
        '金华市': 'static/map/jinhua.json',
        '衢州市': 'static/map/quzhou.json',
        '台州市': 'static/map/taizhou.json',
        '丽水市': 'static/map/lishui.json',
        '舟山市': 'static/map/zhoushan.json',
      },
      choosecity: [
        {name:'浙江省'}
      ],
      geoData: [],
      geoArr: [],
      // 地图
      option:{
        //  提示框
        tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
              if(params.componentSubType == 'map'){
                var value = (params.value + '').split('.');
                value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                return params.seriesName + '<br/>' + params.name + ': ' + value;
              }else if(params.componentSubType == 'effectScatter'){
                var values = params.value[2];
                return params.seriesName + '<br/>' + params.name + ': ' + values;
              }
                
            }
        },
        // 图例
        visualMap: {
            left: 'left',
            min: 0,
            max: 120,
            show: false,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            text:['高','低'],           // 文本，默认为数值文本
            calculable: true
        },
        // 刷新、下载功能
        // toolbox: {
        //     show: true,
        //     //orient: 'vertical',
        //     left: 'left',
        //     top: 'top',
        //     feature: {
        //         dataView: {readOnly: false},
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        geo: { // 地图配置
            show: true,
            map: 'zhejiang',
            label: {
                normal: { show: true }, //是否显示各省市名称
                emphasis: { show: true } //选中的时候是否显示各省市名称
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: '#47D1FF',
                    borderColor: '#3B5077'
                },
                emphasis: { areaColor: '#2B91B7' }
            },
            zoom: 1.2
        },
        // 地图数据
        series: [{ // 散点配置
              name: '火化人数',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              // data: convertData(sanData),
              // data中设置visualMap的原因：visualMap 组件控制了 series 中的数据，进行了『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
              // 所以，data中value的值不同，映射后的颜色会改变。
              // 想哪个数据不被控制，就要设置它的visualMap:false
              data:[
                {name:'杭州市',value: [120.162546,30.279845,80],visualMap: false},
                {name:'绍兴市',value: [120.583968,30.038809,10],visualMap: false},
                {name:'丽水市',value: [119.873229,28.43771,130],visualMap: false},
              ],
              symbolSize: 30,//坐标图标大小统一设置为30
              //动态控制坐标点图标的大小
              // symbolSize: function (val) {
              //     return val[2];
              // },
              // showEffectOn: 'emphasis', //配置何时显示特效。
              rippleEffect: { brushType: 'stroke' }, //涟漪特效相关配置。  波纹的绘制方式
              hoverAnimation: true, //是否开启 hover 在拐点标志上的提示动画效果。
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: false,
                  },
                  emphasis: { show: true }
              },
              itemStyle: {
                  normal: { 
                    color: '#6e8aef' 
                  }
              }
            },{
                name: '工程数',
                type: 'map',
                mapType: 'zhejiang', // 自定义扩展图表类型
                geoIndex: 0,
                // aspectScale: 0.75, // 长宽比
                itemStyle: {
                    normal: {
                      label: {
                          show: true
                        }
                      },
                },
                data:[
                    {name: '杭州市', value: 10,},
                    {name: '湖州市', value: 20},
                    {name: '嘉兴市', value: 30},
                    {name: '宁波市', value: 40},
                    {name: '绍兴市', value: 40},
                    {name: '金华市', value: 40},
                    {name: '舟山市', value: 40},
                    {name: '台州市', value: 80},
                    {name: '温州市', value: 90},
                    {name: '丽水市', value: 100},
                    {name: '衢州市', value: 110}
                ]
            }
        ]
      },
    };
  },
  mounted() {
    axios.get("static/map/zhejiang.json").then((result) => {
      echarts.registerMap('zhejiang', result.data);
      this.myChart = echarts.init(this.$refs.map);
      this.myChart.setOption(this.option);
      this.myChart.on("click", this.chartClick);
    }).catch((error) => {
      console.log(error)
    });
    this.$refs.map.oncontextmenu=function(){
      return false;
    };
  },
  components:{
    HollowPie,
    SolidPie,
    category
  },
  
  methods: {
    chartClick(param){
      this.myChart.setOption(this.option, false);//防止地图继续下钻，若需要继续下钻可以注释掉，敲黑板，此处是同一个元素，不是冒泡，
      if (this.provinceList.indexOf(param.name) == -1) return  
      var citymaps = param.name;
      this.choosecity.forEach((item,index) => {
        if(item.name == citymaps){
          var s = this.choosecity.slice(0,index+1);
          this.choosecity = s;
        }
      });
      if(citymaps != this.choosecity[this.choosecity.length -1].name){
        this.choosecity.push({name: citymaps});
      };
      axios.get(this.cityProper[param.name]).then((result) => {
        echarts.registerMap(citymaps, result.data);
        this.option.geo.map = citymaps;
        this.option.series[0].data = [];
        if(citymaps === '浙江省'){
          this.option.series[1].data = [
                    {name: '杭州市', value: 10,},
                    {name: '湖州市', value: 20},
                    {name: '嘉兴市', value: 30},
                    {name: '宁波市', value: 40},
                    {name: '绍兴市', value: 40},
                    {name: '金华市', value: 40},
                    {name: '舟山市', value: 40},
                    {name: '台州市', value: 80},
                    {name: '温州市', value: 90},
                    {name: '丽水市', value: 100},
                    {name: '衢州市', value: 110}];
          this.option.series[0].data = [
            {name:'杭州市',value: [120.162546,30.279845,20],visualMap: false},
            {name:'绍兴市',value: [120.583968,30.038809,10],visualMap: false},
            {name:'丽水市',value: [119.873229,28.43771,130],visualMap: false}];
        }else if(citymaps === '杭州市'){
          this.option.series[1].data = [{name:'临安区',value:100}];
        }else if(citymaps === '金华市'){
          this.option.series[0].data = [{name: '金华市政府', value:['120.653656', '29.085538']},{name: '金华市政府', value:['120.09504', '29.338159']}]; 
        }else{
          // this.option.series[0].data = [];
        }
        this.myChart.setOption(this.option, true);
      }).catch((error) => {
        console.log(error)
      });
    },
    // 地图时间类型按钮
    timeclick(val){
      this.values = new Date();
      switch(val){
        case '年':
          this.timeType = 'year';
          break;
        case '月':
          this.timeType = 'month';
          break;
        case '日':
          this.timeType = 'date';
          break;
          default:
      }
    },
    // 地图中的时间框改变触发
    timechange(val){
      console.log(val)
    }
  }
};
</script>